<template>
  <div class="todo-item">
    <!-- 勾选框 -->
    <div class="todo-item__checkbox">
      <div class="todo-checkbox">
        <input
          type="checkbox"
          :checked="status === 'done'"
          @change="onChange"
        />
        <span></span>
      </div>
    </div>

    <!-- 文本内容 -->
    <div class="todo-item__text" v-if="!isEditMode">{{ name }}</div>
    <!-- 编辑模式 -->
    <div class="todo-item__input" v-else>
      <input type="text" :value="name" @keyup.enter="onUpdate" />
    </div>

    <!-- 操作区域 -->
    <div class="todo-item__handle">
      <TodoEditButton @click="onClick" @a="onClick" a="123" />
      <TodoDeleteButton />
    </div>
  </div>
</template>

<script setup>
import TodoEditButton from "@/components/TodoEditButton.vue";
import TodoDeleteButton from "@/components/TodoDeleteButton.vue";
import { ref, inject } from "vue";

// 定义接收接收到的 props 数据
const props = defineProps({
  id: [Number, String],
  name: String,
  status: {
    type: String,
    validator: function (value) {
      // 这个值必须匹配下列字符串中的一个
      return ["doing", "done"].includes(value);
    },
  },
});

// 定义自定义事件
const emit = defineEmits(["aaa"]);

// 是否是编辑模式
const isEditMode = ref(false);

function onClick() {
  console.log("Todo Item onClick");
  isEditMode.value = !isEditMode.value;
}

function onChange($event) {
  const isChecked = $event.target.checked;
  console.log(isChecked);
  // 触发一个自定义事件，
  // vue2 this.$emit('xx事件', isChecked)
  console.log(props.id, props.name, props.status);
  emit("aaa", {
    id: props.id,
    isChecked,
  });
}

const updateTodo = inject("updateTodo");
function onUpdate(event) {
  // 获取当前输入框的内容
  const value = event.target.value;
  /**
   * 调用 updateTodo 方法，修改
   *  updateTodo 的本体是在 App.vue 中 provide 提供的。
   */
  updateTodo({
    id: props.id,
    status: props.status,
    name: value,
  });
  // 退出编辑模式
  isEditMode.value = false;
}
</script>

<style scoped lang="scss">
.todo-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 20px;
  height: 50px;
  border-bottom: 1px solid blueviolet;

  &:last-child {
    border-bottom: none;
  }

  &__checkbox {
    margin-right: 10px;
  }

  &__text,
  &__input {
    flex: 1;
    font-size: 24px;
  }

  &__handle {
    display: flex;
  }
}

.todo-item__input {
  input {
    margin: 0;
    padding: 0 16px;
    width: 100%;
    height: 36px;
    font-size: 18px;
  }
}

.todo-checkbox {
  position: relative;
  width: 20px;
  height: 20px;

  input {
    z-index: 1;
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
  }

  span {
    position: absolute;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 100%;
    background-image: url("@/assets/checkbox.png");
  }

  input:checked + span {
    background-image: url("@/assets/checkbox-active.png");
  }
}
</style>
